<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-date-picker
        v-model="value2"
        type="datetimerange"
        :picker-options="pickerOptions"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        :default-time="['12:00:00', '08:00:00']"
        @change="endDate"
      >
      </el-date-picker>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:my-user:export']"
          >导出</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="my_userList"
      @selection-change="handleSelectionChange"
      @sort-change="dataListSortChangeHandle"
    >
      <!-- <el-table-column type="selection" width="55" align="center" /> -->

      <el-table-column label="ID" align="center" prop="id" />

      <el-table-column label="昵称" align="center" prop="userName" />
      <el-table-column label="头像" align="center" prop="userAvatar">
        <template slot-scope="scope">
          <el-avatar :src="scope.row.headimg"></el-avatar>
        </template>
      </el-table-column>

      <el-table-column label="积分" align="center" prop="jf" />
      <el-table-column label="次数" align="center" prop="count" />
      <el-table-column label="金额" align="center" prop="totalMoney" />
      <!-- <el-table-column label="提现密码" align="center" prop="password2" />
      <el-table-column label="父级id" align="center" prop="pid" /> -->

      <!-- <el-table-column
       sortable="custom"
        label="玩家今日消费"
        align="center"
        prop="lastLoginTime"
      /> -->
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="page"
      :limit.sync="size"
      @pagination="getList"
    />
  </div>
</template>

<script>
import axios from "axios";
import { getLeaderboard } from "@/api/top/top_list.js";
export default {
  name: "My-user",

  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },

      value2: ["2022-06-21 00:14:37", "2022-06-21 00:14:37"],

      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      page: 1,
      size: 10,
      // 用户管理表格数据
      my_userList: [],
      Id: null,
    };
  },
  //过滤器
  filters: {
    //将秒数转化为时分秒
    formatSeconds: function (value) {
      var secondTime = parseInt(value); // 秒
      var minuteTime = 0; // 分
      var hourTime = 0; // 小时
      if (secondTime > 60) {
        minuteTime = parseInt(secondTime / 60);
        secondTime = parseInt(secondTime % 60);
      }
      if (minuteTime > 60) {
        hourTime = parseInt(minuteTime / 60);
        minuteTime = parseInt(minuteTime % 60);
      }
      var result =
        "" +
        parseInt(secondTime) +
        "秒" +
        parseInt(minuteTime) +
        "分" +
        parseInt(hourTime) +
        "小时";
      return result;
    },
  },

  created() {
    this.Id = this.$route.params.paihangId || null;
    this.gettime();
    this.getList(this.value2);
  },
  methods: {
    //获取当天时间段
    gettime(val) {
      let ts_begin = new Date();
      let ts_end = new Date();

      ts_begin.setTime(
        ts_begin.getTime() -
          3600 * 1000 * ts_begin.getHours() -
          60 * 1000 * ts_begin.getMinutes() -
          1000 * ts_begin.getSeconds()
      );
      ts_end.setTime(ts_begin.getTime() + 3600 * 1000 * 24 - 1000);

      this.value2 = [ts_begin, ts_end];
    },

    endDate(e) {
      console.log(this.value2);
      this.getList(this.value2);
    },

    /** 查询用户管理列表 */
    getList(data) {
      this.loading = true;
      getLeaderboard({
        page: this.page,
        size: this.size,
        type: this.Id,
        start: data[0],
        end: data[1],
      }).then((response) => {
        this.my_userList = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "system/my-user/export",
        {
          ...this.queryParams,
        },
        `my-user_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
